import { ReactNode } from 'react';
import { View, Text, StyleSheet } from 'react-native';

import { BackButton } from './back-button';

interface PageHeaderProps {
  title: string;
  rightSlot?: ReactNode;
  onBack?: () => void;
  backFallback?: string;
}

export function PageHeader({ title, rightSlot, onBack, backFallback }: PageHeaderProps) {
  return (
    <View style={styles.container}>
      <BackButton onPress={onBack} fallbackTo={backFallback} />
      <Text style={styles.title} numberOfLines={1}>
        {title}
      </Text>
      <View style={styles.right}>{rightSlot}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 12,
    backgroundColor: '#fdf7fb',
    marginBottom: 8,
  },
  title: {
    flex: 1,
    fontSize: 18,
    fontWeight: '700',
    color: '#2f1f2b',
  },
  right: {
    minWidth: 32,
    alignItems: 'flex-end',
  },
});

